$(function(){
    //加载商品列表数据并渲染
    $.ajax({
        url:'./data/goods.json',
        type:'get',
        dataType:'json',
        success: function(data){
            var newDom=""
            $.each(data,function(index,item){
                var str =` <div class="goods">
                <img src="${item.imgurl}" alt="">
                <p>￥${item.price}</p>
                <h3>${item.title}</h3>
                <span>${item.rate}</span>
                <div data-id="${item.id}">>>加入购物车</div>
            </div>`;
                newDom+=str;
            })
            $(".content").html(newDom);
        }
    })

    //判断本地存储数据是否存在
    if(localStorage.getItem("goods")){
        var goodsArr = JSON.parse(localStorage.getItem("goods"))
    }
    else {
        var goodsArr = []
    }
    //点击加入购物车
    $(".content").on("click",".goods div",function(){
        //记录下点击商品id
        var id = $(this).attr("data-id")
        //如果本地数据有 遍历本地数据 
        var flag =true; 
        $.each(goodsArr,function(index,item){
            //判断新加商品本地是否存在
            if(item.id == id)
            {
                item.num++;
                flag = false;
            }
        })
        //不存在  就加入本地数据
        if(flag){
            goodsArr.push({
                    "id":id,"num":1
                })
        }
        //更新本地数据
            localStorage.setItem("goods",JSON.stringify(goodsArr))
        alert("加入购物车成功！")
    })
})